<template>
  <div class="app-container">
    <el-dialog
      width="880px"
      height="800px"
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      append-to-body>
      <div class="info">
        <el-row>
          <el-col class="title"> 基本信息 </el-col>
          <el-form ref="form" label-width="100px" size="small">
            <el-row>
              <el-col :span="10">
                <el-form-item label="规则名称">
                  <el-input v-model="ruleBasic.ruleName" class="detail-input" maxlength="60" placeholder="请输入规则名称" />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="产品服务">
                  <el-select v-model="serviceId" placeholder="请选择产品服务" @change="changeService">
                    <el-option
                      v-for="item in serviceOptions"
                      :key="item.id"
                      :label="item.description"
                      :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="触发机制">
                  <el-select v-model="ruleBasic.triggering" placeholder="请选择触发机制">
                    <el-option
                      v-for="item in triggering"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="启用状态">
                  <el-select v-model="ruleBasic.state" placeholder="请选择启用状态">
                    <el-option
                      v-for="item in state"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="规则描述">
                  <el-input
                    v-model="ruleBasic.remark"
                    placeholder="请输入规则描述"
                    :autosize="{ minRows: 3, maxRows: 10 }"
                    maxlength="255"
                    show-word-limit
                    type="textarea" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </div>

      <div class="info">
        <el-row>
          <el-col class="title"> 触发机制 </el-col>
        </el-row>
        <el-form>
          <div v-if="conditionForm.length == 0" class="condition">
            <span>尚未设置条件</span>
          </div>
          <div v-for="(item, index) in conditionForm" :key="index" class="conditionItem">
            <el-select v-model="item.propertiesId" placeholder="请选择属性" style="width: 160px" size="mini">
              <el-option v-for="item in propertiesOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-select v-show="item.propertiesId" v-model="item.comparisonMode" placeholder="请选择" style="width: 120px" size="mini">
              <el-option v-for="item in datatypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input v-if="item.comparisonMode == 'between'" v-model="item.minValue" style="width: 60px" placeholder=">=" clearable size="mini" />
            <el-input v-if="item.comparisonMode == 'between'" v-model="item.maxValue" style="width: 60px" placeholder="<=" clearable size="mini" />
            <el-input v-if="item.comparisonMode && item.comparisonMode != 'between'" v-model="item.comparisonValue" style="width: 100px" placeholder="" clearable size="mini" />
            <el-link class="fr" @click="deleteAttr(index)">删除</el-link>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getList as getServiceList } from '@/api/cms/monitor/product/services'
import { getList as getPropertiesList } from '@/api/cms/monitor/product/properties'
import { updateRule, getRuleById, deletRuleById, deleteRuleConditionById } from '@/api/cms/monitor/event'
export default {
  name: 'UpdateEvent',
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      id: null,
      productIdentification: null,
      serviceId: null,
      ruleBasic: null,
      conditionForm: [],
      productOptions: [],
      serviceOptions: [],
      propertiesOptions: [],
      datatypeList: [{ label: '=', value: '==' }, { label: '>', value: '>' }, { label: '<', value: '<' }, { label: '>=', value: '>=' }, { label: '!=', value: '!=' }, { label: '<=', value: '<=' }, { label: 'between', value: 'between' }],
      state: [{ label: '启用', value: '1' }, { label: '禁用', value: '0' }],
      triggering: [{ label: '任意一个', value: '1' }, { label: '全部', value: '0' }]
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.id = this.dialog.id
        this.getDetail()
        this.getServiceList()
        this.getProperties()
      }
    }
  },
  methods: {
    // 打开弹框前执行
    beforeOpenDialog() {},

    getDetail() {
      getRuleById({ 'id': this.id }).then(res => {
        this.ruleBasic = res.data
        this.productIdentification = res.data.productIdentification
        this.serviceId = res.data.serviceId
        this.conditionForm = res.data.conditionsList
      })
    },

    getServiceList() {
      this.serviceOptions = []
      getServiceList({ 'productIdentification': this.productIdentification }).then(res => {
        this.serviceOptions = res.data
      })
    },

    changeService(val) {
      this.serviceId = val
      this.ruleBasic = val
      this.getProperties()
    },

    getProperties() {
      this.propertiesOptions = []
      getPropertiesList({ 'serviceId': this.serviceId }).then(res => {
        this.propertiesOptions = res.data
      })
    },
    deleteAttr(index) {
      this.confirmBox(`确定删除这条数据?`)
        .then(() => {
          deleteRuleConditionById({ 'id': this.conditionForm[index].id })
          this.conditionForm.splice(index, 1)
        })
        .catch(() => {})
    },
    submitData() {
      this.conditionForm.forEach(item => {
        if (item.comparisonMode == 'between') {
          item.comparisonValue = item.minValue + ',' + item.maxValue
        }
      })
      this.ruleBasic.conditionsList = this.conditionForm
      updateRule(this.ruleBasic).then(res => {
        this.dialog.visible = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .dialog_box {
    padding: 15px 30px;
    box-sizing: border-box;
    .info {
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      padding: 20px 50px;
      box-sizing: border-box;
      font-weight: 700;
      color: rgb(77, 74, 74);
      margin: 0 0 20px 0;
      .title{
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 10px;
      }
    }
    .el-form {
      padding: 20px 20px;
      .el-select {
        padding: 0 10px;
      }
      .el-input{
        margin-right: 20px;
      }
      .condition {
        width: 100%;
        height: 40px;
        background: white;
        padding: 20px 50px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #606266;
        font-size: 12px;
      }
      .conditionItem{
        width: 100%;
        height: 40px;
        background: white;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
      }

    }
  }
</style>
